<template>
	<view class="find">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<view class="top headline">
			<uni-icons type="arrowleft" size="24" class="left" color="#000" @click="commonality.back()" />
			<view class="find_input">
				<input
					type="text"
					v-model="find.find"
					:placeholder="find.text"
					:class="{ import: find.is_import }"
					@focus="aaa()"
					@blur="bbb()"
					confirm-type="search"
					@confirm="go_find()"
				/>
				<image src="/static/img/find_1.png" class="go-find" @click="go_find()" />
			</view>
			<text @click="cancel()">取消</text>
			<!-- #ifdef MP-WEIXIN -->
			<view class="mpoffset" v-if="MPtop" v-bind:style="{ width: MPtop + 'px' }"></view>
			<!-- #endif -->
		</view>
		<view class="history" v-show="!find.is_go">
			<view>
				搜索历史
				<image src="/static/img/delete.png" class="delete" @click="del()" />
			</view>
			<view class="shop">
				<text class="tag" v-for="(item1, index) in initData" :key="index" @click="tag(item1)">{{item1}}</text>
			</view>
		</view>
		<view class="result" v-show="find.is_go">
			<view class="ul" v-if="result.length">
				<view class="shop" v-for="(item, index) in result" :key="index">
					<view class="img"><image :src="imgCDNUrl+item.goodsImg" mode="aspectFill" @click="go_good(item.id)"/></view>
					<view class="msg">
						<view class="name">{{ item.goodsName }}</view>
						<view class="price">
							￥{{ item.discountPrice }}
							<image src="/static/img/car_1.png" class="right" @click="getshopDate(item.id)" />
						</view>
					</view>
				</view>
			</view>
			<view class="pagination"  v-if="result.length">
				<view class="left" :class="{ forbid: paging.page == 1 }" @click="prev">
					<uni-icons type="arrowleft" size="20" color="#fff" class="icons" />
					上一页
				</view>
				<view class="center">{{ paging.page }}/{{ paging.total }}</view>
				<view class="right" :class="{ forbid: paging.page == paging.total }" @click="next">
					下一页
					<uni-icons type="arrowright" size="20" color="#fff" class="icons" />
				</view>
			</view>
			<view class="none" v-else>暂未搜索结果</view>
		</view>
		<transition name="fade"><view class="ceng" v-show="is_preposition || is_share" @click="ceng"></view></transition>
		<view class="preposition" v-show="is_preposition">
			<view class="intro" >
				<view class="img"><image :src="productImg" mode="aspectFill" /></view>
				<view class="text">
					<view class="name">{{ goodDetails.goodsName }}</view>
					<!-- <view class="price" v-if="goodDetails.skus">￥{{ goodDetails.skus[0].discountPrice }}</view> -->
					<view class="control">
						<text>-</text>
						<text>1</text>
						<text>+</text>
					</view>
				</view>
				<view class="close" @click="ceng"><uni-icons type="closeempty" size="30rpx" color="#9b9b9b" class="uni-icons" /></view>
			</view>
			<view class="ul" v-if="shop_details[0]">
				<view class="flex">
					<view class="li" v-for="(item, index1) in shop_details[0].sublevel" :key="index1" :class="{ active:index1 == indexs}"
					 @click="checkeds(item, index1)">
						{{ item }}
					</view>
				</view>
				<view class="flex">
					<view class="li" v-for="(item, index) in shop_details[0].size" :key="index" :class="{ active: index == idx}"
					 @click="checkcolor(item, index)">
						{{ item }}
					</view>
				</view>		
			</view>
			<view class="button" @click="sub()">确 定</view>
		</view>
	</view>
</template>
<script>
import list from '../../../servers/commodity/list.js';
import goodDetails from '../../../servers/commodity/particulars.js';
import { uniIcons } from '@dcloudio/uni-ui';
export default {
	components: { uniIcons },
	data() {
		return {
			find: {
				text: '请输入需要查询的内容',
				is_import: false,
				find: '',
				is_go: false
			},
			result: [],
			paging: {
				page: 1,
				total: 100
			},
			idx: 0,
			indexs: 0,
			initData: [],
			is_preposition: 0,
			actId:'',
			goodDetails: [],
			goodImag: [],
			tmp:'',
			productImg: '',
			disPrice:'',
			shop_details: [],
			checked: [],
			// #ifdef MP-WEIXIN
			MPtop: '',
			// #endif
			is_share: false
		};
	},
	mounted() {
		var that = this;
		var list = uni.getStorageSync('serarchparam')
		this.actId = uni.getStorageSync('actId')||this.$route.query.actId;
		this.subsite = uni.getStorageSync('subsite')||this.$route.query.actId;
		// if(list){
		// 	for(var i in list){
		// 		that.initData.push(list[i]);
		// 	}
		// }
		// this.getdata();
		// #ifdef MP-WEIXIN
		this.MPtop = (wx.getSystemInfoSync().screenWidth - wx.getMenuButtonBoundingClientRect().left)*2;
		// #endif
	},
	onLoad() {
		var that = this;
		that.initData=[]
		var list = uni.getStorageSync('serarchparam')	
		if(list){
			for(var i in list){
				that.initData.push(list[i]);
			}
		}
	},
	methods: {
		go_good(e) {
			this.commonality.route_baling('/pages/shop/commodity/particulars', 'shopId', e);
		},
		go_find() {
			var that = this;
			
			uni.getStorage({
				key: 'serarchparam',
				complete() {
					if(that.initData.indexOf(that.find.find+'')<0){
						that.initData.unshift(that.find.find+'');
					}
					uni.setStorage({
						key: 'serarchparam',
						data:that.initData,
						success: function() {							
						}
					});
				}
			});
			console.log(this.initData);
			if (this.find.find) {
				console.log(this.find.find);
				var args = this.find.find;
				var param = { information: args,currentPage: this.paging.page,pageSize: 10};
				if(this.actId){
					param = { information: args,actId:this.actId,currentPage: this.paging.page,pageSize: 10};
				}else if(this.subsite){
					param = { information: args,partitionId:this.subsite,currentPage: this.paging.page,pageSize: 10};
				}
				list.getList(param)
					.then(res => {
						if (res.code == 200) {
							/* 进行页面的跳转*/
							this.result = res.data.records;
							this.page.pages = res.data.pages;
							this.page.total = res.data.total;
						}
						this.find.is_go = true;
					})
					.catch(err => {
						console.log(new Error('请检查网络后重试'));
					});
			}
		},
		next() {
			if (this.paging.page < this.paging.total) {
				this.paging.page += 1;
				this.go_find()
			}
		},
		prev() {
			if (this.paging.page > 1) {
				this.paging.page -= 1;
				this.go_find()
			}
		},
		getshopDate(e) {
			this.is_preposition=true
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			goodDetails
				.goodDetails(e)
				.then(res => {
					this.goodDetails = res.data;
					this.goodImag = this.goodDetails.imgs.map(v => {
						v = this.imgCDNUrl + v;
						return v;
					});
					if (res.data.skus.length>0) {
						this.productImg = this.imgCDNUrl + this.goodDetails.skus[0].productImg;
					} else {
						this.productImg = this.goodImag[0];
					}
					this.screen();
					uni.hideLoading();
					console.log(this.productImg)
				})
				.catch(err => {
					uni.hideLoading();
					console.log(new Error('请检查网络后重试'));
				});
		},
		screen() {
			var classify = [];
			var it1 = [],it2 = [];
			var da1 = this.goodDetails.skus;
			var da10 = [];
			for (var i = 0; i < da1.length; i++) {
				var da2 = da1[i].productSkuDesp;
				var da3 = da2.split(',');
						
				it1.push(da3[0].split(':')[1])
				it2.push(da3[1].split(':')[1])
						
				for (var j = 0; j < it1.length; j++) {
					if (da10.indexOf(it1[j]) === -1) {
						da10.push(it1[j])
					}
				}
				for (var k = 0; k < it2.length; k++) {
					if (classify.indexOf(it2[k]) === -1) {
						classify.push(it2[k])
					}
				}		
			}
			this.shop_details.push({
				size: classify,
				sublevel: da10
			});
			// for (var i = 0; i < da1.length; i++) {
			// 	var da2 = da1[i].productSkuDesp;
			// 	var da3 = da2.split(',');
			// 	for (var i1 = 0; i1 < da3.length; i1++) {
			// 		var d4 = da3[i1].split(':');
			// 		if (classify.indexOf(d4[0]) === -1) {
			// 			classify.push(d4[0]);
			// 		}
			// 		if (it1.indexOf(d4[0]) === -1) {
			// 			it1.push(d4[0]);
			// 			da10.push({
			// 				name: d4[0],
			// 				sublevel: [d4[1]]
			// 			});
			// 		} else {
			// 			var d5 = da10[it1.indexOf(d4[0])].sublevel;
			// 			if (d5.indexOf(d4[1]) === -1) {
			// 				d5.push(d4[1]);
			// 			}
			// 		}
			// 	}
			// }
			// this.shop_details = da10;
			// this.checked = da10.map(v => {
			// 	return v.sublevel[0];
			// });
			this.checked1 = this.shop_details[0].size[0]
			this.checked = this.shop_details[0].sublevel[0]
			this.is_preposition = true;
		},
		// 选择尺寸
		checkeds(e, ind) {
			this.indexs = ind
			this.checked = e
			this.goodDetails.skus.map(v=>{
				if(v.productSkuDesp.split(',')[0].split(':')[1] ==this.checked ){
					this.productImg = this.imgCDNUrl + v.productImg
				}
			})
		},
		// 选择颜色
		checkcolor(e, ind) {
			this.idx = ind
			this.checked1 = e
		},
		sub() {
			var login = [];
			uni.getStorage({
				key: 'login',
				success: function(res) {
					login = res.data;
				}
			});
			if (!login.id) {
				uni.navigateTo({
					url: '/pages/shop/account/login'
				});
				return
			}
			uni.showLoading({
				title: '提交中',
				mask: true
			});
			var productSkuDesp = '';
			var productId = '';
			var skus = this.goodDetails.skus;
			for (var i = 0; i < skus.length; i++) {
				var size = skus[i].productSkuDesp.split(',')[1].split(':')[1]
				var color = skus[i].productSkuDesp.split(',')[0].split(':')[1]
				if (this.checked == color && this.checked1 == size) {
					productId = skus[i].id;
				}
			}

			var da = {
				productId: productId, // 货品id
				quantity: 1 // 货品数量
			};
			this.shopcart(da);
		},
		shopcart(da) {
			goodDetails
				.shopcart(da)
				.then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						uni.showToast({
							title: '加入购物车成功',
							duration: 2000
						});
						this.is_preposition=false
					} else {
						uni.showToast({
							title: '加入购物车失败',
							duration: 2000,
							icon:'none'
						});
					}
				})
				.catch(err => {
					uni.hideLoading();
					console.log(new Error('请检查网络后重试'));
				});
		},
		cancel() {
			this.find.find = '';
			this.find.is_go = false;
			uni.switchTab({
			    url: '/pages/shop/index'
			});
		},
		ceng() {
			this.is_preposition = false;
			this.is_share = false;
		},
		del(){
				var that=this
				uni.removeStorage({
				    key: 'serarchparam',
				    success: function (res) {
				       // that.getdata();
					   that.initData=[];
				    }
				});
		},
		aaa() {
			this.find.text = '';
			this.find.is_import = true;
		},
		bbb() {
			if (!this.find.find) {
				this.find.text = '请输入需要查询的内容';
				this.find.is_import = false;
			}
		},
		tag(e) {
			this.find.find = e;
			this.find.is_go=true
			this.go_find();
		}
	}
};
</script>

<style lang="less" scoped>
page {
	background: #ffffff;
}
.find {
	background: #fff;
	height: 100%;
	.top {
		display: flex;
		line-height: 44px;
		.find_input{
			position: relative;
			width: 100%;
			input {
				text-align: center;
				flex: 1;
				height: 29px;
				font-size: 14px;
				font-weight: 100;
				margin-left: 80rpx;
				line-height: 29px;
				background: #f0f0f0;
				color: #000;
				border-radius: 29px;
				padding: 0 70rpx 0 30rpx;
			}
			input.import {
				text-align: left;
			}
			.go-find {
				position: absolute;
				padding: 7px;
				width: 17px;
				height: 17px;
				right: 3px;
				bottom: 0px;
			}
		}
		
		.left {
			position: absolute;
			bottom: 7rpx;
			left: 10rpx;
			line-height: 35px;
			width: 60rpx;
			z-index: 9;
		}
		text {
			text-align: center;
			width: 119rpx;
			line-height: 30px;
			font-weight: 100;
		}
	}
	.preposition {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #fff;
		z-index: 100;
		.ul {
			margin-bottom: 10rpx;
			margin-top: 20rpx;
			padding: 0 20rpx;
			.p {
				font-size: 28rpx;
				line-height: 57rpx;
			}
		
			.li {
				display: inline-block;
				border-radius: 6rpx;
				padding: 19rpx 24rpx;
				border: 1px solid #efefef;
				/*no*/
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				font-size: 30rpx;
			}
		
			.li.active {
				background: #bd3c8c;
				color: #fff;
				border-color: #bd3c8c;
			}
		}
		.input {
			.inp {
				width: 100%;
				border: 1px solid #efefef;
				line-height: 80rpx;
				height: 80rpx;
				padding: 20rpx;
				margin: 20rpx 0;
				box-sizing: border-box;
				border-radius: 6rpx;
				font-size: 28rpx;
			}
		}
		.intro {
			position: relative;
			display: flex;
			padding: 49rpx 20rpx;
	
			.img {
				margin-right: 30rpx;
	
				image {
					width: 211rpx;
					height: 211rpx;
				}
			}
	
			.text {
				padding-right: 65rpx;
	
				.name {
					font-size: 28rpx;
					line-height: 40rpx;
				}
	
				.price {
					position: absolute;
					bottom: 49rpx;
					color: #bd3c8c;
					font-size: 36rpx;
				}
	
				.control {
					position: absolute;
					bottom: 40rpx;
					right: 20rpx;
					width: 200rpx;
					border: 1px solid #a0a0a0;
					/*no*/
					color: #d0d0d0;
					display: flex;
					text-align: center;
					line-height: 58rpx;
					border-radius: 30rpx;
					font-size: 32rpx;
	
					text {
						flex: 1;
					}
	
					text:nth-child(2) {
						color: #333;
						border-left: 1rpx solid #9b9b9b;
						border-right: 1rpx solid #9b9b9b;
					}
				}
			}
	
			.close {
				position: absolute;
				top: 40rpx;
				right: 20rpx;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				border: 1px solid #9b9b9b;
				/*no*/
				text-align: center;
				color: #9b9b9b;
				line-height: 40rpx;
	
				.uni-icons {
					position: absolute;
					left: 0;
					top: 0;
					font-size: 40rpx;
				}
			}
		}
	
		.parameter {
			padding: 0 20rpx;
	
			.ul {
				margin-bottom: 10rpx;
	
				.p {
					font-size: 28rpx;
					line-height: 57rpx;
				}
	
				.li {
					display: inline-block;
					border-radius: 6rpx;
					padding: 19rpx 24rpx;
					border: 1px solid #efefef;
					/*no*/
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					font-size: 30rpx;
				}
	
				.li.active {
					background: #bd3c8c;
					color: #fff;
					border-color: #bd3c8c;
				}
			}
	
			.input {
				.inp {
					width: 100%;
					border: 1px solid #efefef;
					line-height: 80rpx;
					height: 80rpx;
					padding: 20rpx;
					margin: 20rpx 0;
					box-sizing: border-box;
					border-radius: 6rpx;
					font-size: 28rpx;
				}
			}
		}
	
		.button {
			margin: 80rpx 20rpx 20rpx;
			background: linear-gradient(80deg, #d2158a, #fc6395);
			text-align: center;
			line-height: 90rpx;
			font-size: 32rpx;
			color: #fff;
			border-radius: 45rpx;
		}
	}
	.history {
		padding: 0 20rpx;
		view {
			font-size: 28rpx;
			line-height: 80rpx;
			.delete {
				position: relative;
				width: 32rpx;
				height: 32rpx;
				float: right;
				top: 20rpx;
			}
		}
		.tag {
			display: inline-block;
			padding: 14rpx 26rpx;
			line-height: 30rpx;
			background: #f4f4f4;
			color: #999999;
			border-radius: 64rpx;
			margin: 0 23rpx 35rpx 0;
		}
	}
	.result {
		width: 100%;
		position: absolute;
		top: 114rpx;
		bottom: 0;
		overflow-y: auto;
		box-sizing: border-box;
		.ul {
			padding: 20rpx;
			overflow: hidden;
			.shop {
				width: 47%;
				float: left;
				overflow: hidden;
				box-shadow: 1rpx 2rpx 20rpx rgba(197, 197, 197, 0.35);
				border-radius: 20rpx;
				margin-bottom: 30rpx;
				.img {
					image {
						width: 100%;
						height: 300rpx;
					}
				}
				.msg {
					.name {
						padding: 0 16rpx;
						height: 80rpx;
						font-size: 30rpx;
						margin-top: 20rpx;
						line-height: 40rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
					.price {
						padding: 0 16rpx;
						font-size: 32rpx;
						color: #bd3c8c;
						line-height: 86rpx;
						.right {
							position: relative;
							width: 44rpx;
							height: 44rpx;
							float: right;
							top: 18rpx;
						}
					}
				}
			}
			.shop:nth-child(2n) {
				margin-left: 6%;
			}
		}
	}
}
</style>
